<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="1000px"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-form ref="powerEdit" :model="power" :rules="rules" label-width="100px">
      <el-form-item label="菜单名" prop="Name">
        <el-input v-model="power.Name" maxlength="100" placeholder="菜单名" />
      </el-form-item>
      <el-form-item label="所属目录" prop="pid">
        <el-cascader
          v-model="power.pid"
          :options="menus"
          placeholder="所属目录"
          :props="props"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item label="图标" prop="Icon">
        <iconChiose v-model="power.Icon" />
      </el-form-item>
      <el-form-item label="备注" prop="Description">
        <el-input
          v-model="power.Description"
          type="textarea"
          maxlength="255"
          placeholder="备注"
        />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { GetTrees } from '@/api/role/power'
import * as appPowerApi from '@/flow/api/appPower'
import iconChiose from '@/components/tools/iconChiose.vue'
export default {
  components: {
    iconChiose
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    appName: {
      type: String,
      default: null
    },
    appId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '设置应用菜单',
      menus: [],
      menCache: {},
      rules: {
        Name: [
          {
            required: true,
            message: '菜单名不能为空！',
            trigger: 'blur'
          }
        ],
        pid: [
          {
            required: true,
            message: '所属目录不能为空！',
            trigger: 'blur'
          }
        ]
      },
      props: {
        multiple: false,
        emitPath: false,
        checkStrictly: true,
        value: 'Id',
        label: 'Name',
        children: 'Children'
      },
      power: {
        pid: null,
        Name: null,
        Description: null,
        Icon: null
      }
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.loadMenu()
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    save() {
      this.$refs['powerEdit'].validate((valid) => {
        if (valid) {
          this.savePower()
        } else {
          return false
        }
      })
    },
    async savePower() {
      const data = Object.assign({}, this.power)
      data.AppId = this.appId
      data.PowerType = 0
      delete data.pid
      const menu = this.menCache[this.power.pid]
      if (menu.type === 'menu') {
        data.ParentId = menu.Id
        data.SubSystemId = menu.subId
      } else {
        data.SubSystemId = menu.Id
        data.ParentId = 0
      }
      await appPowerApi.Set(data)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async loadMenu() {
      const list = await GetTrees({
        PowerType: 1
      })
      this.menus = list.map((c) => {
        const sub = {
          Id: c.SubSysId,
          Name: c.SubSysName,
          Type: 'sub',
          Children: c.Powers
        }
        this.menCache[c.SubSysId] = sub
        this.formatPower(c.Powers, c.SubSysId)
        return sub
      })
    },
    formatPower(list, subId) {
      if (list == null || list.length === 0) {
        return
      }
      list.forEach((c) => {
        c.type = 'menu'
        c.subId = subId
        this.menCache[c.Id] = c
        this.formatPower(c.Children, subId)
      })
    },
    async reset() {
      const res = await appPowerApi.Get(this.appId)
      this.title = '设置应用(' + this.appName + ')菜单'
      if (res == null) {
        this.power = {
          pid: null,
          Name: this.appName,
          Description: null,
          Icon: null
        }
      } else {
        this.power = {
          pid: res.ParentId === 0 ? res.SubSystemId : res.ParentId,
          ParentId: res.ParentId,
          Name: res.Name,
          Description: res.Description,
          Icon: res.Icon
        }
      }
      this.source = res
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      if (this.source == null) {
        this.power = {
          pid: null,
          Name: this.appName,
          Description: null,
          Icon: null
        }
      } else {
        this.power = {
          pid: this.source.ParentId === 0 ? this.source.SubSystemId : this.source.ParentId,
          Name: this.source.Name,
          Description: this.source.Description,
          Icon: this.source.Icon
        }
      }
    }
  }
}
</script>
